 $(function () {
    var $audios=$("audio");
    var $playBtns=$('.play');
//  console.log($audios);

    var startProgress = function (obj, prog,isPlay) {
        isPlay=isPlay===undefined?true:false;
        var counter="";
        var timefmt = function (sec) {

            var second = (sec*1).toFixed(0),
                minute = Math.floor(second / 60),
                second = second % 60;
            if (minute < 10)
                minute = "0" + minute;
            if (second < 10)
                second = "0" + second;

            return minute + ":" + second;
        }
        var refreshProgress = function (audio, prog) {
        
            var duration=!!audio.duration?audio.duration:"";
            var current = timefmt(audio.currentTime),
                total = timefmt(duration);
            prog.text( current + " / " + total );
        }
        if(isPlay){
            counter=setInterval(function (a, b, c) {
                    refreshProgress(a, b, c);
                }, 1000, obj, prog );
        }else{
            clearInterval(counter);
        }
        $(obj).off("canplay").on("canplay",function(){
            refreshProgress( this, prog );
        });
    }

    $playBtns.off('click').on('click', function (e) {
        e.preventDefault();
        var audio = $(this).parent().siblings('audio');
//      console.log(audio);
        if ($(this).hasClass('playing')) {  
            $(this).removeClass('playing').addClass("stoped").next().removeClass('active').end().parent().next().removeClass('playingIt');
            $(this).next().addClass('active').end().parent().next().addClass('stopedIt');
            audio[0].pause();
            audio.removeClass('active');
        }else if ($(this).hasClass('stoped')) {
            $(this).removeClass("stoped").addClass('playing').next().addClass('active').end().parent().next().removeClass('stopedIt').addClass('playingIt');
            audio[0].play();
            audio.addClass('active');
        } else {
            $('.play').removeClass('playing').removeClass('stoped').next().removeClass('active').end().parent().next().removeClass('playingIt').removeClass("stopedIt");
            $(this).removeClass("stoped").addClass('playing').next().addClass('active').end().parent().next().addClass('playingIt');
            $audios.removeClass('active');
            audio.addClass('active');
            $.each($audios,function(idx,ele){
                if($(ele).hasClass('active')){
                }else{
                    ele.load();
                }
            })
            audio[0].play();
        }
        return false;
    });
    $('audio').map(function (i, audio) {
        startProgress( this, $(audio).siblings('p.progress'),false);
    });
    $('audio').on('playing', function (e) {
            startProgress( this, $(this).siblings('p.progress') );
    });
});